<template>
  <div class="box">
    <div class="header">头</div>
    <div class="main">
      <div class="nothing" v-if="empty">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="购物车为空"
        />
      </div>
      <div class="hasting" v-else>
        <van-swipe-cell v-for="(item, index) in CartList" :key="index">
          <van-checkbox v-model="item.flag">复选框</van-checkbox>
          <van-card
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #num>
              <van-stepper
                v-model="item.num"
                theme="round"
                button-size="22"
                disable-input
                @change="updateNum(item.cart_list,item.num)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Empty, Card, Stepper, SwipeCell, Checkbox, CheckboxGroup } from "vant";

Vue.use(Empty);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { cart_list ,doUpdateNum} from "../api/cart";
export default {
  name: "Cart",
  components: {},
  data() {
    return {
      // name:"",
      empty: true,
      CartList: [],
    };
  },

  created() {
    //判断用户是否登录
    if (localStorage.getItem("token")) {
      this.getCartList();
    } else {
      // 去到登录页
      this.$router.push("/login");
    }
  },
  methods: {
    updated () {
      // 调用增加数量的接口
      doUpdateNum({cart_list,num})
    },
    getCartList() {
      // 发送 获取购物车的请求
      cart_list({ userid: localStorage.getItem("userid") }).then((res) => {
        console.log(res);
        if (res.data.code == "l020") {
          this.empty = true; //没有数据
        } else {
          this.empty = false; //有数据
          this.CartList = res.data.data;
          // console.log(this.cartList);
        }
      });
    },
  },
};
</script>
<style scoped>
.delete-button {
  height: 100%;
}
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: #fff;
}
::v-deep .van-checkbox {
  width: 0.2rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: #fff;
}
</style>